<template>
  <div class="songs">
      <!-- 筛选区 -->
    <div class="songs_catelist">
      <div class="songs_cateone" v-for="(m,index) in pois" :key="index">
        {{ m[0] }}<i v-for="(mi,indexs) in m[1]" :key="indexs" @click="beise(index,indexs)" :class="{active:jol[index][0]==indexs}"> {{mi}}</i>
      </div>
    </div>
    <div class="song_img" v-for="(m,index) in getsongs" :key="index" @click="gosongstwo(m)">
               <img :src="`${m.img1v1Url}?param=185y155`" alt="">  
               <i> {{m.name}}</i>
    </div>
     <div  class="fenye">  <el-button-group class="btns">
           <el-button icon="el-icon-arrow-left" v-show="jol[3][0]!=0&&isoffsets!=0" @click="isoffsets(1)">上一页</el-button>
           <el-button  v-show="jol[3][0]!==50" @click="isoffsets(2)">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      pois: {
        0: ["语种:",{0:'全部', 8:'华语',9: "欧美", 9:"日本", 17:"韩国" ,89:"其他"}],


        1: ["分类:",{0:"全部", 2:"男歌手",3: "女歌手",4: "乐队"}],

        2: [
          "筛选:",
           { '-1':"热门",
            A:"A",
            B:"B",
            C:"C",
            D:"D",
            E:"E",
            F:"F",
            G:"G",
            H:"H",
            I:"I",
            J:"J",
            K:"K",
            L:"L",
            M:"M",
            N:"N",
            O:"O",
            P:"P",
            Q:"Q",
            R:"R",
            S:"S",
            T:"T",
            U:"U",
            V:"V",
            W:"W",
            X:"X",
            Y:"Y",
            Z:"Z",
            'ZZ':"#"}
          ,
        ],
      },
      jol:[[],[],[],[]],
    offsets:0


      
    };
  },
  mounted() {
        this.jol[3].push('0')
    console.log(this.jol);
      if(sessionStorage.getItem('soc')){
           this.jol=JSON.parse(sessionStorage.getItem('soc'))
          
      }else{
            this.$store.dispatch("getsongs",{m:this.offsets*18,mi:'',ms:'',mq:''});
      }
      //this.jol[3].push
  },
  watch:{
         jol:{
             handler:function(){
                // console.log(this.jol[2][0]);
                  let so =this.jol[2][0]
                  //this.jol[3].push(this.offsets)
                  if(so=='ZZ'){
                     so=0
                     }else if(so=='-1'){
                              so=-1
                     }
                     console.log(this.jol[3][0]*18);
               this.$store.dispatch("getsongs",{m:this.jol[3][0]*18,mi:so,ms:this.jol[1][0]*1-1,mq:this.jol[0][0]*1-1});
             },
             deep:true
         },
        
  },
  methods:{
      beise(mi,ms){
         this.jol[mi].splice(0)
        this.jol[mi].push(ms)
         this.jol[3].splice(0,1,'0')
       sessionStorage.setItem('soc',JSON.stringify(this.jol))
      },
      isoffsets(m){
          if(m==1){
              this.offsets--
          }else{
              this.offsets++
          }
          this.jol[3].splice(0)
             this.jol[3].push(this.offsets)
             console.log(this.jol);
             sessionStorage.setItem('soc',JSON.stringify(this.jol))
      },
      gosongstwo(m){
       
        this.$router.push({name:'songstwo',params:{id:m.id}})
        console.log(this.$route);
      }
  },
  computed:{
      ...mapState({
  getsongs:(state)=>{
              return state.user.getsongs
  }
      })
  }
};
</script>

<style lang='less' scoped>
.songs {
  margin: 20px 135px;

  height: 100%;
 
  .songs_catelist {
    height: 120px;

    .songs_cateone {
      height: 30px;
      font-size: 16px;
      
      i {
        display: inline-block;
        font-size: 16px;
       cursor: pointer;
     
        margin-left: 30px;
        &.active{
               color: skyblue;
        }
      }
    }
  }
  .song_img{
      float: left;
      width: 185px;
      height: 155px;
      cursor: pointer;
      padding-bottom: 50px;
      margin-right: 25px;
       img{
           width: 185px;
           height: 155px;
       }
       i{
           font-size: 20px;
       }
  }
   .fenye{
     float: left;
     width: 100%;
    height: 160px;
    .btns{
      float: right;
      margin-right: 35px;
    }
   }
}
</style>